<script>
export default {
  props: {
    // 当前按钮的具体权限点字符串
    btnString: {
      type: String,
      default: "",
    },
  },
  // h是一个函数，其实就是createElement
  render(h) {
    // h函数有三个参数：① 你要创建的dom元素的名字，② 是这个元素的属性，③ 是这个元素的内容
    // <div id="mydiv" class="btn btn-primary">按钮</div>
    // return h("div", { id: "mydiv", class: "btn btn-primary" }, "按钮");
    // return h("div", { id: "mydiv", class: "btn btn-primary" }, [
    //   h("h1", {}, "h1的内容"),
    //   h("h2", {}, "h2的内容" + this.btnString),
    //   this.$slots.default,
    // ]);
    // 按钮的权限管理思路拆解：
    // 1.获取当前用户的所有权限字符串数组(vuex->user-> profile->permissions)
    const pers = this.$store.state.user.profile.permissions;

    // 2. 当前按钮的权限点标记：this.btnString
    if (pers.includes("*:*:*") || pers.includes(this.btnString)) {
      // 表示当前的按钮是有权限的，所以应该返回去显示
      return this.$slots.default;
    }
  },
};
</script>

<style>
</style>